<template>
  <div>
		<el-tabs type="card" v-model="props.activeName" class="demo-tabs">
			<el-tab-pane
				v-for="item in props.tableData"
				:key="item.id"
				:label="item.createDate + ' ' + item.createTime"
				:name="item.sessionId">
				<h2 style="margin-bottom: 10px;">问答情况</h2>
				<section class="question">
					<div
						v-for="(str, index) in JSON.parse(item.content)"
						:key="index"
						:class="str.role">
						{{str.message}}
					</div>
				</section>
				<el-divider></el-divider>
				<h2 style="margin-bottom: 10px;">结果分析</h2>
				<pre class="result" v-html="marked.parse(item.result)"></pre>
			</el-tab-pane>
		</el-tabs>
  </div>
</template>

<script setup>
import { marked } from 'marked'
const props = defineProps({
	tableData: {
		type: Array,
		default: () => []
	},
	activeName: {
		type: String,
		default: ''
	}
})
</script>

<style scoped lang="scss">
.question {
	div {
		line-height: 20px;
		margin: 10px 0;
	}
	.ai {
		color: #ff0000;
	}
}
.result {
	background-color: #f5f5f5;
	padding: 10px;
	white-space: pre-wrap;
}
</style>